<template>
    <div class="body">
        <ul class="goods">
            <li v-for="(i,key) of goodsList" :key="key">
                <p class="list_title" @click="openGoodsClass(i.id)"><i class="iconfont" :class="openId === i.id?'icon-zhankai red-icon':'icon-shouqi'"></i>{{i.name}}</p>
                <ul class="goodsList" v-show="openId === i.id">
                    <li v-for="(item,index) of i.goods" :key="index" class="good">
                        <img :src="$store.getters.base_url+item.pic" alt="" class="goods_logo">
                        <div class="good-details">
                            <p class="good-name">{{item.name}}</p>
                            <p class="good-detail">{{item.detail}}</p>
                            <p class="good-price"><span>￥{{item.price}}</span><i class="iconfont icon-bianji-" @click="onShowPopup(item)"></i></p>
                        </div>
                        <!-- <mt-button class='change' @click="onShowPopup(item)">编辑</mt-button> -->
                    </li>
                    <li v-show="!i.goods">该分类下暂无商品</li>
                </ul>
            </li>
        </ul>
        <mt-button class="btn" @click="onShowPopup(0)">添加商品</mt-button>
        <mt-popup
        v-model="popupVisible"
        position="right">
            <AddGoods @close="onShowPopup(0)" :alert="alert"></AddGoods>
        </mt-popup>
    </div>
</template>
<script>
import {goodsList} from '../api';
import AddGoods from '../components/addGoods.vue';
export default {
    data() {
        return {
            popupVisible:false,
            openId:1,
            goodsList:[],
            alert:1
        }
    },
    components:{AddGoods},
    created(){
        this.getGoodsList();
    },
    methods:{
        openGoodsClass(id){
            if(this.openId === id){
                this.openId = Number;
            }else{
                this.openId = id;
            }
        },
        getGoodsList(){
            const data = {
                token:this.$store.getters.token
            }
            goodsList(data).then(res=>{
                console.log(res)
                this.goodsList = res.data
            })
        },
        onShowPopup(i){
            console.log(i);
            this.alert = i;
            this.popupVisible = !this.popupVisible;
            this.getGoodsList();
        }
    }
}
</script>
<style scoped>
    .body{
        height: Calc(100vh - 3rem);
        background: #eee;
    }
    .btn{
        width: 100%;
        position: fixed;
        bottom: 3rem;
        background: #F23D3D;
        color: #fff;
        border-radius: 0;
        font-weight: bold;
    }
    .goodsList{
        margin-left: 1rem;
        list-style-type: none;
    }
    .goods{
        height: Calc(100vh - 10rem);
        overflow: auto;
        padding: 0 1rem;
        list-style-type: none;
        background: #fff;
    }
    .list_title {
        line-height: 3rem;
        font-size: 1rem;
        font-weight: bold;
    }
    .list_title .iconfont {
        margin-right: 0.4rem;
        color: #888;
    }
    .goods_logo {
        width: 4rem;
        height: 4rem;
        border-radius: 5px;
    }
    .good {
        display: flex;
        justify-content: space-between;
        padding:1rem;
        align-items: center;
        margin:0.4rem 0;
    }
    .good>div{
        width: 75%;
    }
    .good-name{
        font-size: 0.9rem;
        font-weight: bold;
    }
    .good-detail{
        font-size: 0.6rem;
        color: #9b9b9b;
    }
    .good-price{
        font-size: 1rem;
        line-height: 2rem;
        font-weight: bold;
        color: #F23D3D;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .good-price i{
        font-size: 1.2rem;
    }
    .good p{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
    }
    /* .change{
        background: #F0463C;
        color: #fff;
        font-size: 1rem;
    } */
    .good-details{
        border-bottom: 0.02rem solid #e1e1e1;
    }
    .red-icon{
        color: #F23D3D !important;
    }
</style>